<script setup>
import { ref } from 'vue'

import chapterData from '../data/ChapterData.json'
import storyByChapterData from '../data/StoryByChapterData.json'
import jsonToMap from '../j2m.js'
import { getText } from '../store/txtstore.js'
import { store } from '../store/avgstore.js'
import AvgList from '../components/avg/AvgList.vue'
import Avg from '../components/avg/Avg.vue'
import SiteNotice from '../components/SiteNotice.vue'

const chapters = jsonToMap(chapterData.data)
const storyChapters = jsonToMap(storyByChapterData.data)
const cpts = new Map()
for (const chapterId of storyChapters.keys()) {
  if (chapterId < 90000) {
    const chapter = chapters.get(chapterId)
    const number = chapterId < 1000 ? '第' + chapterId + '章 ' : '活动 '
    cpts.set(chapterId, new Map([
      ['name', number + getText(chapter[2][1])],
      ['intro', getText(chapter[22][1])]
    ]))
  }
}

function viewChapter(event) {
  const idx = +event.currentTarget.getAttribute('index')
  store.cptId = idx
  store.viewIdx = 1
}
</script>

<template>
  <SiteNotice/>
  <ul v-if="store.viewIdx === 0">
    <li v-for="[chapterId, chapter] of cpts" :index="chapterId" @click="viewChapter" v-html="`<span style=font-weight:bold;>${chapter.get('name')}</span>&nbsp;&nbsp;${chapter.get('intro')||''}`"></li>
  </ul>
  <AvgList v-else-if="store.viewIdx === 1" :chapterName="cpts.get(store.cptId).get('name')" />
  <Avg v-else />
</template>

<style scoped>
li {
  cursor: pointer;
}
</style>